<template>
  <div style="margin-left: 150px;font-size: 30px;margin-top: 10px">
    <a href="#" style="color:#545454;text-decoration: none;">LO<span style="color: #c4c4c4">V</span><span>O</span> | 朗沃商城</a>
  </div>
  <div class="cjh" style="display:flex;margin-top: 20px">
    <div style="width: 1000px;height: 800px;text-align:center">
      <p style="font-size: 38px;color: white;padding-top: 270px">成功起点，LOVO首选</p>
      <p style="font-size: 22px;color:#d3d3d3;">优质产品，超低价格，太好逛了吧</p>
      <p style="font-size: 22px;color:#d3d3d3;">好生活，购实惠</p>
    </div>
    <div style="display: flex;align-items: center;justify-content: center;margin: 0 auto">
      <div>
          <el-form :rules="rules" :model="qLogonUser" ref="qLogonUser" style="background-color: white;width: 480px;height: 700px;display: flex;align-items:center;justify-content: center;flex-wrap: wrap">
            <div>
              <el-form-item prop="userName">
                <el-input size="large" style="width: 350px;height: 50px;font-size: 18px" placeholder="用户名" v-model="qLogonUser.userName">
                  <template #prefix>
                    <el-icon><UserFilled /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item prop="userRealName">
                <el-input size="large" style="width: 350px;height: 50px;font-size: 18px" placeholder="真实姓名" v-model="qLogonUser.userRealName">
                  <template #prefix>
                    <el-icon><Avatar /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <div class="mb-2 flex items-center text-sm" style="display:flex;align-items: center;width: 350px;height: 50px;font-size: 18px">
              <el-form-item prop="userGender">
                <el-radio-group v-model="qLogonUser.userGender" class="ml-4">
                  <el-radio label="0" size="large" aria-checked="true">男</el-radio>
                  <el-radio label="1" size="large">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div>
              <el-form-item prop="userPassword">
                <el-input size="large" type="password" style="width: 350px;height: 50px;font-size: 18px" placeholder="密码" v-model="qLogonUser.userPassword">
                  <template #prefix>
                    <el-icon><Lock /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item prop="ackPwd">
                <el-input size="large" type="password" style="width: 350px;height: 50px;font-size: 18px" placeholder="确认密码" v-model="qLogonUser.ackPwd">
                  <template #prefix>
                    <el-icon><Lock /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item prop="userTel">
                <el-input size="large" style="width: 350px;height: 50px;font-size: 18px" placeholder="电话号码" v-model="qLogonUser.userTel">
                  <template #prefix>
                    <el-icon><Phone /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item prop="verify">
                <el-input size="large" style="width: 350px;height: 50px;font-size: 18px;" placeholder="验证码" v-model="qLogonUser.verify"></el-input>
              </el-form-item>
            </div>
            <div style="width: 350px;height: 50px;font-size: 18px;">
              <el-form-item>
                <el-image :src="codePic" style="width: 100px;height: 50px;"></el-image>
                <el-button @click="changeCode();">看不清，换一张</el-button>
              </el-form-item>
            </div>
            <div>
              <el-button size="large" style="margin: 0 25px" type="primary" @click="ackLogon()">注册</el-button>
              <el-button size="large" style="margin: 0 25px" @click="$router.back">返回</el-button>
            </div>
          </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "QLogon",
  created() {
    this.changeCode();
  },
  data(){
    return{
      codePic:"",
      qLogonUser:{},
      rules:{
        userName:[
          {required:true,message:'请输入用户名',trigger:'blur'},
        ],
        userRealName:[
          {required:true,message:'请输入真实姓名',trigger:'blur'},
          {pattern: /^[\u4E00-\u9FA5]{1,10}$/, message: '请输入正确的姓名', trigger: 'blur'}
        ],
        userPassword:[
          {required:true,message:'请输入密码',trigger:'blur'},
        ],
        ackPwd:[
          {required:true,message:'请确认密码',trigger:'blur'},
        ],
        userTel:[
          {required:true,message:'请输入电话号码',trigger:'blur'},
          {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur'}
        ],
        verify:[
          {required:true,message:'请输入验证码',trigger:'blur'},
        ]
      },
    }
  },
  methods:{
    ackLogon(){
      console.log(this.qLogonUser);
      if (this.qLogonUser.userPassword == this.qLogonUser.ackPwd){
        axios.get('/api/commons/verify/'+this.qLogonUser.verify).then(resp=>{
          if (resp.data.code==1){
            this.$message.success(resp.data.data);
            //注册
            axios.post('/api/users/qLogon',this.qLogonUser).then(resp=>{
              if (resp.data.code==1){
                this.$message.success(resp.data.data)
                //跳转到登录界面
                this.$router.push("login");
              }else {
                this.$message.error(resp.data.msg)
              }
            })
          }else {
            this.$message.error(resp.data.msg)
            this.changeCode();
          }
        })
      }else {
        this.$message.error("请检查密码与确认密码是否正确!")
      }

    },
    changeCode(){
      axios.get('/api/commons/getCode',{responseType: 'blob'}).then(resp=>{
        this.codePic = window.URL.createObjectURL(resp.data);
      })
    },
  }
}
</script>

<style scoped>
.cjh {
  width: 1600px;
  margin: auto;
  background-image: url("../img/攀登.png");
  background-repeat: repeat-y;
  background-position: center;
  background-attachment: fixed;
  background-size: 1600px auto;
}
</style>